import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 定义路由
const routes = [
  {
    path: '/',
    redirect: '/main'
  },
  {
    path: '/main',
    name: 'Main',
    component: () => import('@/views/main/MainView.vue')
  },
  {
    path: '/layout',
    name: 'Layout',
    component: () => import('@/views/layout/LayoutView.vue'),
    children: [
      {
        path: '/layout/book',
        name: 'Book',
        component: () => import('@/views/book/BookView.vue')
      },
      {
        path: '/layout/film',
        name: 'Film',
        component: () => import('@/views/film/FilmView.vue')
      },
      {
        path: '/layout/film/detail/:id',
        name: 'FilmDetail',
        component: () => import('@/views/detail/FilmDetailView.vue'),
        props: true // 允许通过props接收路由参数，将路由参数传递给组件
      },
      {
        path: '/layout/book/detail/:id',
        name: 'BookDetail',
        component: () => import('@/views/detail/BookDetailView.vue'),
        props: true // 允许通过props接收路由参数，将路由参数传递给组件
      },
      {
        path: '/layout/user',
        name: 'User',
        redirect: '/user/info',
        component: () => import('@/views/user/UserView.vue'),
        children: [
          {
            path: '/user/info',
            name: 'UserInfo',
            component: () => import('@/views/user/UserInfoView.vue')
          },
          {
            path: '/user/edit',
            name: 'Edit',
            component: () => import('@/views/user/UserEditView.vue')
          },
          {
            path: '/user/collect',
            name: 'Collect',
            component: () => import('@/views/user/UserCollection.vue')
          }
        ]
      },
      {
        path: '/user/other/:id',
        name: 'OtherUser',
        component: () => import('@/views/user/OtherUserInfoView.vue'),
        props: true // 允许通过props接收路由参数，将路由参数传递给组件
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/LoginView.vue')
  }
]

// 创建路由实例
const router = new VueRouter({
  // （缩写）相当于routes： routes
  routes
})

// 解决Element-ui导航栏中的vue-router在3.0版本以上重复点击菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err)
}

// 导出路由实例
export default router
